<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import type { SegmentItem } from '@/types/interface'
import { useWindowSize } from '@/utils/useWindowSize'
import useAutoPie from '@/utils/useAutoPie/index'
import * as echarts from 'echarts'

const chart = ref()


const segmentItems = reactive<SegmentItem[]>([
    {
        type: 1,
        title: '存库',
        isSelect: true
    },
    {
        type: 2,
        title: '入库'
    },
    {
        type: 3,
        title: '出库'
    }
])

const options = {
  tooltip: {
    show: false,
    trigger: 'item',
  },
  toolbox: {
    show: false,
  },
  legend: {
    show: false,
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['50%', '80%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 2,
        borderColor: 'rgb(18,24,52)',
        borderWidth: 2.5
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          lineHeight: 13,
          color: function (param: any) {
            return param.color
          },
          formatter: function (param: any) {
            return param.name + '\n' + param.percent + '%'
          }
        }
      },
      labelLine: {
        show: false
      },
      animation: true,
      animationDuration: 1000,
      animationDurationUpdate: 500,
      data: [
        { value: 1048, name: '备件' },
        { value: 735, name: '废旧' },
        { value: 580, name: '外矿' },
        { value: 484, name: '喷吹煤' },
        { value: 300, name: '铝锭' }
      ]
    }
  ]
};

let myEchart : any = null
onMounted(() => {
  myEchart = echarts.init(chart.value)
  myEchart.setOption(options)
  // 定时播放饼状图
  const { auto } = useAutoPie()
  auto(myEchart,3000,options.series[0].data.length)
})

// 大屏适配尺寸工具
const { reSizeEvent } = useWindowSize()
reSizeEvent(()=>{
  myEchart.resize()
})
</script>

<template>
    <div class="full-w">
        <SepTitle title="物料类型统计">
            <template #header>
                <Segment :selectItems="segmentItems"></Segment>
            </template>
            <template #main>
                <div class="column-normal main">
                    <span class="full-w font-size-12 p-a-10">
                        <span class="left-cell-title-color m-l-10">当前库存物料：</span>
                        <span>0</span>
                        <span class="m-l-5">种</span>
                    </span>
                    <div class="r-b shadow-normal">
                      <div ref="chart"  class="ringChart"></div>
                    </div>
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.main
    padding-bottom 20px;
    height 200px
    
$ringChartLength = 120px
.ringChart 
    width $ringChartLength
    height $ringChartLength
</style>